<template>
  <div>
    <h1>Bar Chart with D3.js in Vue</h1>
    <div ref="chart"></div>
  </div>
</template>

<script>
import * as d3 from "d3"

export default {
  data() {
    return {
      chartData: [], // 存储数据的数组
    }
  },
  mounted() {
    this.initializeChart()
  },
  methods: {
    initializeChart() {
      const svg = d3
        .select(this.$refs.chart)
        .append("svg")
        .attr("width", 800)
        .attr("height", 300)

      this.path = svg
        .append("path")
        .datum(this.chartData)
        .attr("fill", "none")
        .attr("stroke", "red")
        .attr("stroke-width", 2)
      const p = d3.path()
      p.moveTo(1, 2)
      p.lineTo(3, 4)
      p.closePath()
    },
  },
}
</script>
